<template>
  <div class="btn">
    <!-- 面包屑-->
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              >客户管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>车主卡</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
    <!-- 添加的-->
    <div class="lineHeightBtn">
      <!--      <el-button type="primary" @click="dialogFormVisible = true"-->
      <!--        >添加</el-button-->
      <!--      >-->
      <!--      <input-->
      <!--        type="text"-->
      <!--        v-model="searchValue"-->
      <!--        id="chaxun_owner"-->
      <!--        placeholder="请输入司机姓名或电话"-->
      <!--      />-->
      <!--      <el-button type="primary" @click="search">查询</el-button>-->
      <el-card style="margin-bottom: 20px">
        <div class="lefted">
          <el-input
            type="text"
            v-model="searchValue"
            id="chaxun_owner"
            class="search_input"
            placeholder="请输入司机姓名或电话"
          />
          <el-button type="primary" @click="search">查询</el-button>
        </div>
        <el-button
          type="primary"
          @click="dialogFormVisible = true"
          style="float: right"
          class="righted"
          >添加</el-button
        >
      </el-card>

      <el-dialog
        id="tanChu_owner"
        title="添加车主卡"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form">
          <el-form-item label="用户名">
            <el-input v-model="form.ownerName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="form.ownerPhonenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.ownerNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车主身份证号">
            <el-input v-model="form.ownerIdcard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆发动机号">
            <el-input
              v-model="form.ownerEngineNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="品牌型号">
            <el-select v-model="form.ownerBrand" placeholder="车辆品牌型号">
              <el-option label="宝马x6" value="宝马x6"></el-option>
              <el-option label="宝马x5" value="宝马x5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商业险到期日">
            <el-date-picker
              v-model="form.ownerEupdate"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交强险到期日">
            <el-date-picker
              v-model="form.ownerTupdate"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆初登日期">
            <el-date-picker
              v-model="form.ownerFirsttime"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addowner">添 加</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改的弹出框-->
    <div>
      <el-dialog title="修改车主" :visible.sync="dialogFormEditVisible">
        <el-form :model="editform">
          <el-form-item label="用户名">
            <el-input
              v-model="editform.ownerName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="editform.ownerPhonenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input
              v-model="editform.ownerNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车主身份证号">
            <el-input
              v-model="editform.ownerIdcard"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车辆发动机号">
            <el-input
              v-model="editform.ownerEngineNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="品牌型号">
            <el-select v-model="editform.ownerBrand" placeholder="车辆品牌型号">
              <el-option label="宝马x6" value="宝马x6"></el-option>
              <el-option label="宝马x5" value="宝马x5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商业险到期日">
            <el-date-picker
              v-model="editform.ownerEupdate"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交强险到期日">
            <el-date-picker
              v-model="editform.ownerTupdate"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆初登日期">
            <el-date-picker
              v-model="editform.ownerFirsttime"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 列表-->
    <el-table
      id="lineHeight2"
      :data="ownerData"
      border
      style="width: 100%"
      :header-cell-style="headClass" :cell-style="rowClass"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="ownerId" label="ID"> </el-table-column>
      <el-table-column prop="ownerName" label="车主名">
      </el-table-column>
      <el-table-column prop="ownerPhonenumber" label="手机号">
      </el-table-column>
      <el-table-column prop="ownerNumber" label="车牌号">
      </el-table-column>
      <el-table-column prop="ownerBrand" label="车辆品牌">
      </el-table-column>
      <el-table-column prop="ownerFirsttime" label="车辆初登日期">
      </el-table-column>
      <el-table-column prop="ownerTupdate" label="交强险到期日期">
      </el-table-column>
      <el-table-column prop="ownerApplication" label="申请时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button class="colorBtn" type="primary" @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            class="colorBtn"
            type="danger"
            @click="del(scope.row.ownerId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="5"
      :current-page="currentPage"
      @current-change="changes"
      :total="length"
    >
      <!--:size-change="func4()"-->
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "driverCard", //车主管理部分
  data: function() {
    return {
      ownerData: [],
      dialogFormVisible: false,
      dialogFormEditVisible: false,
      form: {
        //数据列表
        ownerId: "",
        ownerName: "", //车主名
        ownerPhonenumber: "", //电话
        ownerNumber: "", //车牌号
        ownerBrand: "", //车辆品牌
        ownerFirsttime: "", //车辆初登日期
        ownerTupdate: "", //交强险到期日期
        ownerEupdate: "", //商业险到期日期
        ownerApplication: "", //申请日期
        ownerIdcard: "",
        ownerEngineNumber: "", //车辆发动机号
        ownerLicense: "", //行驶证附件
        ownerArea: "", //所在区域
        ownerPhoto: "", //头像
        ownerLasttime: "" //当前时间
      },
      editform: {
        //修改列表
        ownerId: "",
        ownerName: "", //车主名
        ownerPhonenumber: "", //电话
        ownerNumber: "", //车牌号
        ownerBrand: "", //车辆品牌
        ownerFirsttime: "", //车辆初登日期
        ownerTupdate: "", //交强险到期日期
        ownerEupdate: "", //商业险到期日期
        ownerApplication: "", //申请日期
        ownerIdcard: "",
        ownerEngineNumber: "", //车辆发动机号
        ownerLicense: "", //行驶证附件
        ownerArea: "", //所在区域
        ownerPhoto: "", //头像
        ownerLasttime: "" //当前时间
      },
      length: 10,
      pageID: 1, //默认是第一页开始显示列表
      currentPage: 1, //默认是第一页开始
      pageSize: 5,
      searchValue: ""
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    addowner: function() {
      this.getTimes();
      this.$axios
        .post(this.$api.clientManage.driverCard.insert, {
          ownerName: this.form.ownerName, //
          ownerNumber: this.form.ownerNumber, //
          ownerPhonenumber: this.form.ownerPhonenumber, //
          ownerBrand: this.form.ownerBrand, //
          ownerIdcard: this.form.ownerIdcard, //
          ownerFirsttime: this.form.ownerFirsttime,
          ownerLasttime: this.form.ownerLasttime, //
          ownerTupdate: this.form.ownerTupdate,
          ownerApplication: this.form.ownerLasttime,
          ownerEngineNumber: this.form.ownerEngineNumber,
          ownerLicense: this.form.ownerLicense
        })
        .then(res => {
          console.log("drivercard_add_res = ", res.data.data);
          console.log("发送的 = ", this.form);
          if (res.code === "0") {
            this.$message({
              message: res.data.data.msg,
              type: "success"
            });
            this.dialogFormVisible = false;
            if (res.msg == "查询成功") {
              this.getList();
            }
          } else {
            this.$alert(res.msg);
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    getList: function() {
      this.$axios
        .post(
            this.$api.clientManage.driverCard.selectByPage,
          JSON.stringify({
            num: this.pageID,
            size: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log("driverCard_GetList_res_data = ", res.data);
          var result = res.data;
          var len = result.data.total; //拿到总的数据条数
          this.length = len;
          //                    console.log('this.length  =  ',this.length);
          //                    console.log('result = ',result.data);
          if (result.code == 0) {
            this.ownerData = result.data.list;
            //                        console.log('ownerData = ',this.ownerData);
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log("getListErr = ", err);
          this.$alert("请求出错");
        });
    },
    rowClass() { //表格数据居中显示
      return "text-align:center"
    },
    headClass() { //表头居中显示
      return "text-align:center"
    },
    changes: function(val) {
      this.pageID = val;
      this.getList();
    },
    del: function(Id) {
      //发送删除请求
      console.log("del_Id =  ", Id);
      this.$axios
        .post(
            this.$api.clientManage.driverCard.delete,
          JSON.stringify({
            ownerId: Id
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          var result = res.data;
          //                    console.log('resultv = ',result);
          //                    console.log('resultvc = ',result.values.code);
          if (result.code == 0) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            if (result.msg == "删除成功") {
              this.getList();
            }
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    edit: function(obj) {
      //                console.log('obj = ',obj);
      this.dialogFormEditVisible = true;
      this.editform.ownerId = obj.ownerId; //
      this.editform.ownerName = obj.ownerName;
      this.editform.ownerPhonenumber = obj.ownerPhonenumber;
      this.editform.ownerNumber = obj.ownerNumber;
      this.editform.ownerIdcard = obj.ownerIdcard;
      this.editform.ownerLicense = obj.ownerLicense;
      this.editform.ownerEngineNumber = obj.ownerEngineNumber;
      this.editform.ownerApplication = obj.ownerApplication;
      this.editform.ownerBrand = obj.ownerBrand;
      this.editform.ownerFirsttime = obj.ownerFirsttime;
      this.editform.ownerTupdate = obj.ownerTupdate;
    },
    search: function() {
      this.$axios
        .post(
            this.$api.clientManage.driverCard.find,
          JSON.stringify({
            ownerName: this.searchValue,
            phoneNumber: this.searchValue,
            num: this.pageID,
            size: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log("SearchList_res data = ", res.data);
          var result = res.data;
          var len = result.data.total; //拿到总的数据条数
          this.length = len;
          console.log("this.length  =  ", this.length);
          //                    console.log('result = ',result.data);
          if (result.code == 0) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.ownerData = result.data.list;
            console.log("ownerData = ", this.ownerData);
          } else {
            alert(result.msg);
            this.driverData = [];
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    save: function() {
      //将修改的数据直接发给服务器处理
      console.log("datdTransform = ", this.editform);
      this.$axios
        .post(
            this.$api.clientManage.driverCard.update,
          JSON.stringify({
            ownerName: this.editform.ownerName, //
            ownerNumber: this.editform.ownerNumber, //
            ownerPhonenumber: this.editform.ownerPhonenumber, //
            ownerBrand: this.editform.ownerBrand, //
            ownerIdcard: this.editform.ownerIdcard, //
            ownerFirsttime: this.editform.ownerFirsttime,
            ownerLasttime: this.editform.ownerLasttime, //
            ownerTupdate: this.editform.ownerTupdate,
            ownerApplication: this.editform.ownerLasttime,
            ownerEngineNumber: this.editform.ownerEngineNumber,
            ownerLicense: this.editform.ownerLicense,
            ownerId: this.editform.ownerId
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log("Edit——res = ", res);
          if (res.status == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.getList();
            this.dialogFormEditVisible = false;
          } else {
            this.$alert("出错了");
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    getTimes: function time() {
      //获取当前的时间
      var time = new Date();
      var year = time.getFullYear();
      var mon = time.getMonth() + 1;
      var day = time.getDate();
      var hour = time.getHours();
      var min = time.getMinutes();
      var s = time.getSeconds();
      this.form.ownerLasttime =
        year + "-" + mon + "-" + day + " " + hour + ":" + min + ":" + s;
    }
  }
};
</script>

<style>
.userPage .el-dialog {
  margin-top: 2vh !important;
}
</style>
<style scoped>
#chaxun_owner {
  height: 30px;
  line-height: 30px;
  margin: 0 20px;
  font-size: 20px;
}
#lineHeight2 {
  line-height: 50px !important;
}
.lineHeightBtn {
  text-align: left;
  line-height: 65px !important;
}
span {
  color: #ffffff !important;
}
#tanChu_owner {
  margin-top: 3vh;
}
.lefted {
  float: left;
  /*width: 391px;*/
}
/deep/ .el-card__body {
  padding: 0;
}
.righted {
  margin: 35px;
}
.search_input {
  width: 300px;
  margin: 20px 10px;
}
</style>
